<script setup lang="ts">
  import { ref } from 'vue'

  // 预览地址
  const officeUrl = ref('')

  // 资源地址
  const docx =
    'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.docx'
  const xlsx =
    'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.xlsx'
  const pptx =
    'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pptx'
  const pdf =
    'https://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/solution/demo.pdf'

  // 使用微软 Office Web Viewer 服务预览 office 文件
  const previewOffice = (url: string) => {
    // 考虑到特殊字符，通过 encodeURIComponent 处理一下 url
    officeUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(
      url
    )}`
  }

  // 复制分享地址
  const copyToClipboard = async (text: string) => {
    await navigator.clipboard.writeText(text)
    alert('复制成功')
  }
</script>

<template>
  <div class="container">
    <div class="btns">
      <!-- 微软 Office Web Viewer 服务 -->
      <button @click="previewOffice(docx)">预览docx</button>
      <button @click="previewOffice(xlsx)">预览xlsx</button>
      <button @click="previewOffice(pptx)">预览pptx</button>
      <!-- pdf 直接预览 -->
      <button @click="officeUrl = pdf">预览pdf</button>
      <!-- 复制分享地址 -->
      <button
        class="copy-btn"
        v-if="officeUrl"
        @click="copyToClipboard(officeUrl)"
      >
        复制分享地址
      </button>
    </div>
    <!-- 通过 iframe 嵌入 -->
    <iframe class="previewOffice" :src="officeUrl"></iframe>
  </div>
  
</template>

<style lang="scss">
  body {
    margin: 0;
  }
  .container {
    width: 70vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .previewOffice {
      flex: 1;
    }
    .copy-btn {
      background-color: #070;
      color: #fff;
    }
  }
</style>
